<template>
  <form @submit.prevent="edit()">
    <legend>编辑英雄</legend>
    <div class="form-group">
      <label>英雄名称</label>
      <input v-model="hero.heroName" type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
        <input type="radio" value="男" v-model="hero.gender" /> 男
        <input type="radio" value="女" v-model="hero.gender" /> 女
      </div>
    </div>
    <button class="btn btn-primary">提交</button>
  </form>
</template>

<script>
// import axios from 'axios'
export default {
  data () {
    return {
      hero: {
        heroName: '',
        gender: ''
      }
    }
  },
  created () {
    this.getHero()
  },
  methods: {
    // 获取当前数据
    getHero () {
      this.$http.get(`heroes/${this.$route.params.id}`).then(res=>{
        // 填充表单
        this.hero = res.data // id heroName ctime gender
      })
    },
    // 编辑请求
    edit () {
      // 后台需要三项数据 heroName gender cTime（ID在后台不变）
      // 且现在的 this.hero 对象已经有了四项项数据, cTime改成修改时间
      const {id,heroName,gender} = this.hero
      // 编辑请求
      this.$http.put(`heroes/${id}`,{
        heroName, 
        gender,
        cTime: new Date()
      }).then(()=>{
        // 成功  跳转列表
        this.$router.push('/hero')
      }).catch(()=>{
        alert('修改失败')
      })
    }
  }
};
</script>